<template>
  <div class="project">
    <!-- 预警通知查询  -->
    <div class="wrapper">
      <div class="wb_header">
        <div>预警通知查询</div>
      </div>
      <el-tabs v-model="activeName">
        <el-tab-pane label="短信通知" name="first"></el-tab-pane>
        <el-tab-pane label="微信通知" name="second"></el-tab-pane>
        <el-tab-pane label="邮件通知" name="third"></el-tab-pane> 
      </el-tabs>
      <div class="warp warp1 warp2">
        <el-form :inline="true" :model="queryFrom" class="demo-form-inline">  
          <el-form-item label="">
            <el-select v-model="queryFrom.region" placeholder="请选择监测点">
              <el-option label="常德市石门县南北镇潘坪村雷家山滑坡" value="shanghai"></el-option> 
              <el-option label="常德澧县甘溪镇顺桥地灾隐患点" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="queryFrom.region" placeholder="请选择预警等级">
              <el-option label="蓝色预警" value="shanghai"></el-option>  
              <el-option label="黄色预警" value="shanghai"></el-option>  
              <el-option label="橙色预警" value="shanghai"></el-option>  
              <el-option label="红色预警" value="shanghai"></el-option>  
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="queryFrom.region" placeholder="请选择通知类型">
              <el-option label="确认通知" value="shanghai"></el-option>  
              <el-option label="预警通知" value="shanghai"></el-option>   
            </el-select>
          </el-form-item> 
          <el-form-item label="">
            <el-form-item label=""> 
              <el-input placeholder="请输入手机号码" suffix-icon="el-icon-search" v-model="queryFrom.input"> </el-input>
            </el-form-item>
          </el-form-item> 
          <el-form-item label="">
            <el-form-item label=""> 
              <el-date-picker v-model="queryFrom.value1" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
            </el-form-item>
          </el-form-item> 
          <el-form-item>
            <el-button type="primary">查询</el-button>
            <el-button>重置</el-button>
          </el-form-item>
        </el-form>
      </div>   
      <el-table v-loading="loading" :data="configList">   
        <el-table-column label="监测点名称" align="center" prop="pointName" />
        <el-table-column label="预警等级" width="140" align="center">
          <template slot-scope="scope">
            <div class="cell">
              <el-tag v-show="scope.row.level" :id="getId(scope.row.level)">{{ scope.row.level }}</el-tag> 
            </div>
          </template>
        </el-table-column>
        <el-table-column label="短信模板编码" width="140" align="center" prop="templateCode" :show-overflow-tooltip="true" />
        <el-table-column label="接收号码" width="140" align="center" prop="phone" :show-overflow-tooltip="true" />
        <el-table-column label="推送参数" align="center" prop="requestData" :show-overflow-tooltip="true" />
        <el-table-column label="通知类型" width="140" align="center" prop="msgType" :show-overflow-tooltip="true" />
        <el-table-column label="发送时间" width="160" align="center" prop="sendTime" :show-overflow-tooltip="true" />
        <el-table-column label="发送结果" align="center" prop="result" :show-overflow-tooltip="true" />  
      </el-table>   
      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
    
    </div>
  </div>
</template>

<script>
export default {
data() {
  return {
    activeName: "first",
    queryFrom: {},
    loading: false,
    configList: [
      { "id": 109568, "pointName": "株洲市炎陵县鹿原镇炎陵村坳下组坳上垅滑坡", "level": "黄色预警", "templateCode": "SMS_247710610", "phone": "15874032820", "requestData": "{\"time\": \"2024-02-02 16:46:55\", \"level\": \"黄色\", \"point\": \"株洲市炎陵县鹿原镇炎陵村坳下组坳上垅滑坡\", \"value\": \"4.15°\", \"device\": \"001B21041550_L1_QJ_1\"}", "msgType": "预警通知", "sendTime": "2024-02-02 16:46:55", "result": "{\"Message\":\"OK\",\"RequestId\":\"EE4665A2-14F3-5360-B9B0-DB87DA51B1CE\",\"Code\":\"OK\",\"BizId\":\"965109406863650545^0\"}", "createTime": "2024-02-02 16:47:29", "pointId": 12916 },
      { "id": 109565, "pointId": 12916, "pointName": "株洲市炎陵县鹿原镇炎陵村坳下组坳上垅滑坡", "level": "黄色预警", "templateCode": "SMS_247710610", "phone": "18073288191", "result": "{\"Message\":\"OK\",\"RequestId\":\"EE4665A2-14F3-5360-B9B0-DB87DA51B1CE\",\"Code\":\"OK\",\"BizId\":\"965109406863650545^0\"}", "requestData": "{\"time\": \"2024-02-02 16:46:55\", \"level\": \"黄色\", \"point\": \"株洲市炎陵县鹿原镇炎陵村坳下组坳上垅滑坡\", \"value\": \"4.15°\", \"device\": \"001B21041550_L1_QJ_1\"}", "createTime": "2024-02-02 16:47:29", "sendTime": "2024-02-02 16:46:55", "msgType": "预警通知" },
      { "id": 109566, "pointId": 12916, "pointName": "株洲市炎陵县鹿原镇炎陵村坳下组坳上垅滑坡", "level": "黄色预警", "templateCode": "SMS_247710610", "phone": "19198114338", "result": "{\"Message\":\"OK\",\"RequestId\":\"EE4665A2-14F3-5360-B9B0-DB87DA51B1CE\",\"Code\":\"OK\",\"BizId\":\"965109406863650545^0\"}", "requestData": "{\"time\": \"2024-02-02 16:46:55\", \"level\": \"黄色\", \"point\": \"株洲市炎陵县鹿原镇炎陵村坳下组坳上垅滑坡\", \"value\": \"4.15°\", \"device\": \"001B21041550_L1_QJ_1\"}", "createTime": "2024-02-02 16:47:29", "sendTime": "2024-02-02 16:46:55", "msgType": "预警通知" },
      { "id": 109567, "pointId": 12916, "pointName": "株洲市炎陵县鹿原镇炎陵村坳下组坳上垅滑坡", "level": "黄色预警", "templateCode": "SMS_247710610", "phone": "17375896380", "result": "{\"Message\":\"OK\",\"RequestId\":\"EE4665A2-14F3-5360-B9B0-DB87DA51B1CE\",\"Code\":\"OK\",\"BizId\":\"965109406863650545^0\"}", "requestData": "{\"time\": \"2024-02-02 16:46:55\", \"level\": \"黄色\", \"point\": \"株洲市炎陵县鹿原镇炎陵村坳下组坳上垅滑坡\", \"value\": \"4.15°\", \"device\": \"001B21041550_L1_QJ_1\"}", "createTime": "2024-02-02 16:47:29", "sendTime": "2024-02-02 16:46:55", "msgType": "预警通知" },
      { "id": 109564, "pointId": 14551, "pointName": "宜昌市兴山县高桥乡龚家桥村仙侣高家坡不稳定斜坡", "level": "蓝色预警", "templateCode": "SMS_226935953", "phone": "17375896380", "result": "{\"Message\":\"OK\",\"RequestId\":\"91F66107-644A-57DC-9DBC-1F4A070F6448\",\"Code\":\"OK\",\"BizId\":\"271814506863389913^0\"}", "requestData": "{\"time\": \"2024-02-02 16:20:00.706\", \"level\": \"黄色\", \"point\": \"宜昌市兴山县高桥乡龚家桥村仙侣高家坡不稳定斜坡\", \"value\": \"-50.06mm\", \"device\": \"001A21031013_L1_GP_1\"}", "createTime": "2024-02-02 16:43:09", "sendTime": "2024-02-02 16:20:00", "msgType": "预警通知" },
      { "id": 109558, "pointId": 12550, "pointName": "新团滑坡", "level": "黄色预警", "templateCode": "SMS_226826484", "phone": "18073288191", "result": "{\"Message\":\"OK\",\"RequestId\":\"AD5058BD-206E-5154-8828-68576F8A4E9D\",\"Code\":\"OK\",\"BizId\":\"326320806859916237^0\"}", "requestData": "{\"time\": \"2024-02-02 15:20:01.663\", \"level\": \"黄色\", \"point\": \"新团滑坡\", \"value\": \"-50.15mm\", \"device\": \"001A21021034_L1_GP_1\"}", "createTime": "2024-02-02 15:45:19", "sendTime": "2024-02-02 15:20:01", "msgType": "预警通知" },
      { "id": 109559, "pointId": 12550, "pointName": "新团滑坡", "level": "黄色预警", "templateCode": "SMS_226826484", "phone": "18773137227", "result": "{\"Message\":\"OK\",\"RequestId\":\"AD5058BD-206E-5154-8828-68576F8A4E9D\",\"Code\":\"OK\",\"BizId\":\"326320806859916237^0\"}", "requestData": "{\"time\": \"2024-02-02 15:20:01.663\", \"level\": \"黄色\", \"point\": \"新团滑坡\", \"value\": \"-50.15mm\", \"device\": \"001A21021034_L1_GP_1\"}", "createTime": "2024-02-02 15:45:19", "sendTime": "2024-02-02 15:20:01", "msgType": "预警通知" },
      { "id": 109560, "pointId": 12550, "pointName": "新团滑坡", "level": "黄色预警", "templateCode": "SMS_226826484", "phone": "18774865139", "result": "{\"Message\":\"OK\",\"RequestId\":\"AD5058BD-206E-5154-8828-68576F8A4E9D\",\"Code\":\"OK\",\"BizId\":\"326320806859916237^0\"}", "requestData": "{\"time\": \"2024-02-02 15:20:01.663\", \"level\": \"黄色\", \"point\": \"新团滑坡\", \"value\": \"-50.15mm\", \"device\": \"001A21021034_L1_GP_1\"}", "createTime": "2024-02-02 15:45:19", "sendTime": "2024-02-02 15:20:01", "msgType": "预警通知" },
      { "id": 109561, "pointId": 12550, "pointName": "新团滑坡", "level": "红色预警", "templateCode": "SMS_226826484", "phone": "17375896380", "result": "{\"Message\":\"OK\",\"RequestId\":\"AD5058BD-206E-5154-8828-68576F8A4E9D\",\"Code\":\"OK\",\"BizId\":\"326320806859916237^0\"}", "requestData": "{\"time\": \"2024-02-02 15:20:01.663\", \"level\": \"黄色\", \"point\": \"新团滑坡\", \"value\": \"-50.15mm\", \"device\": \"001A21021034_L1_GP_1\"}", "createTime": "2024-02-02 15:45:19", "sendTime": "2024-02-02 15:20:01", "msgType": "预警通知" },
      { "id": 109562, "pointId": 13532, "pointName": "浏阳市关口街道金湖村长岭组滑坡", "level": "橙色预警", "templateCode": "SMS_259615628", "phone": "19198114338", "result": "{\"Message\":\"OK\",\"RequestId\":\"5A63EED0-810F-52CA-8789-954920271084\",\"Code\":\"OK\",\"BizId\":\"585120006859916234^0\"}", "requestData": "{\"time\": \"2024-02-02 15:20:01.070\", \"point\": \"浏阳市关口街道金湖村长岭组滑坡\", \"device\": \"000320112007\", \"warnLevel\": \"橙色\"}", "createTime": "2024-02-02 15:45:19", "sendTime": "2024-02-02 15:20:01", "msgType": "预警通知" }
    ],
    total: 10,
    queryParams:{
      pageNum: 1,
      pageSize: 10,
    },
    devTypeList:[
      {label: "未激活",value: "0"},
      {label: "在线",value: "1"},
      {label: "离线",value: "2"},
      {label: "已禁用",value: "3"},
      {label: "维护中",value: "4"},
      {label: "维护结束",value: "5"}
    ]
  }
},
methods:{
  getList(){},
  getId(data){
    switch (data) {
      case "蓝色预警":
        return "warnLevel1"; 
      case "黄色预警":
        return "warnLevel2"; 
      case "橙色预警":
        return "warnLevel3"; 
      case "红色预警":
        return "warnLevel4"; 
    }
  }, 
}
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/tablePage.scss";  
.footer{
  div{
    margin-top: 10px;
    font-size: 15px;
    color: #303133;
  }
}
.input_inner_selct{
  width: 100px;
}
</style>